<template>
    <div class="box">
        <!-- 使用组件 -->
        <headers title="详情"></headers>
        <!-- tabs 切换 商品（轮播图 标题 价格） 详情（富文本） 评价 -->
        <van-tabs :active="active" animated>
            <van-tab title="商品">
                <!-- 组件封装  使用组件 +父传子 -->
                <swipers :list="detail.pics"></swipers>
                <div class="title">{{ detail.goods_name }}</div>
                <div class="title" style="color: red;">${{ detail.goods_price }}</div>
            </van-tab>
            <van-tab title="详情">
                <div v-html="detail.goods_introduce"></div>
            </van-tab>
            <van-tab title="评价">内容3</van-tab>
        </van-tabs>
        <van-action-bar>
            <van-action-bar-icon icon="chat-o" text="客服" dot />
            <van-action-bar-icon icon="cart-o" text="购物车" badge="5" />
            <van-action-bar-icon icon="shop-o" text="店铺" badge="12" />
            <van-action-bar-button type="warning" text="加入购物车" @click="addShop()" />
            <van-action-bar-button type="danger" text="立即购买" />
        </van-action-bar>
    </div>
</template>

<script setup>
const active = ref(0)
import { detailApi } from '@/api/api';

//引入组件
import swipers from '@/components/swipers.vue';
import headers from '@/components/headers.vue';
//===================================1接收上个页面传递过来的数据=====================================
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()//带r 跳转 
const route = useRoute()//不带r  接受路由参数

let goods_id = ref(route.query.goods_id);
console.log(goods_id.value)


//===================================2请求详情页的接口数据=====================================
let detail = ref({}) //定义一个对象
const getDetail = () => {
    detailApi(goods_id.value).then((res) => {
        detail.value = res.data.message
    })
}
getDetail()//立即调用

//===================================加入购物车=====================================
import { useCounterStore } from '@/stores/counter'
// 在组件内部的任何地方均可以访问变量 `store` ✨
const store = useCounterStore()
//点击按钮防抖
import _ from 'lodash'
const addShop = _.debounce(() => {
    // console.log(111)
    store.addshopCar(detail.value);//detail.value 里面具有所有的详情信息
    router.push('/home/shop')
}, 1000)

</script>

<style lang="scss" scoped>
.box {
    overflow: auto;
}

.title {
    width: 90%;
    margin: 0 1.5rem;
}
</style>